<template>
  <view class="withdraw-record-container">  
    <view class="record-list" v-if="recordList.length > 0">
      <view class="record-item" v-for="(item, index) in recordList" :key="index">
        <view class="record-top">
          <view class="record-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
          <view class="record-amount">¥{{ item.money }}</view>
        </view>
        <view class="record-bottom">
          <view class="record-time">{{ item.create_time }}</view>
          <view class="record-type">{{ item.type === 'wechat' ? '微信提现' : '其他方式' }}</view>
        </view>
        <view class="record-detail" v-if="item.status === 2">
          <view class="record-detail-item">实际到账：<text class="actual">¥{{ item.actual_money }}</text></view>
          <view class="record-detail-item">手续费：<text class="fee">¥{{ item.fee }}</text></view>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-else>
      <image class="empty-icon" src="/static/images/icon/empty.png" mode="aspectFit"></image>
      <view class="empty-text">暂无提现记录</view>
    </view>
    
    <view class="loading" v-if="loading">
      <view class="loading-text">加载中...</view>
    </view>
    
    <view class="load-more" v-if="recordList.length > 0 && hasMore" @tap="loadMore">
      <view class="load-more-text">{{ loadingMore ? '加载中...' : '加载更多' }}</view>
    </view>
  </view>
</template>

<script>
import { withdrawLogApi } from '../../api/user';

export default {
  data() {
    return {
      recordList: [],
      page: 1,
      pageSize: 10,
      hasMore: true,
      loading: true,
      loadingMore: false
    };
  },
  onLoad() {
    this.getWithdrawRecords();
  },
  methods: {
    // 获取提现记录
    getWithdrawRecords() {
      this.loading = true;
      withdrawLogApi({
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.loading = false;
        if (res && res.list) {
          this.recordList = this.page === 1 ? res.list : [...this.recordList, ...res.list];
          // 判断是否还有更多数据
          this.hasMore = res.list.length >= this.pageSize;
        } else {
          this.hasMore = false;
        }
      }).catch(err => {
        this.loading = false;
        uni.showToast({
          title: '获取记录失败',
          icon: 'none'
        });
      });
    },
    
    // 加载更多
    loadMore() {
      if (this.loadingMore || !this.hasMore) return;
      
      this.loadingMore = true;
      this.page++;
      
      withdrawLogApi({
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.loadingMore = false;
        if (res && res.list && res.list.length > 0) {
          this.recordList = [...this.recordList, ...res.list];
          // 判断是否还有更多数据
          this.hasMore = res.list.length >= this.pageSize;
        } else {
          this.hasMore = false;
        }
      }).catch(err => {
        this.loadingMore = false;
        this.page--; // 恢复页码
        uni.showToast({
          title: '加载更多失败',
          icon: 'none'
        });
      });
    },
    
    // 获取状态类名
    getStatusClass(status) {
      switch (status) {
        case 1: return 'status-pending';
        case 2: return 'status-success';
        case 3: return 'status-rejected';
        default: return '';
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      switch (status) {
        case 1: return '审核中';
        case 2: return '提现成功';
        case 3: return '提现失败';
        default: return '未知状态';
      }
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.getWithdrawRecords();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  }
}
</script>

<style scoped>
.withdraw-record-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

.header {
  background: linear-gradient(to right, #ff6b5d, #ff8c75);
  height: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-title {
  color: #fff;
  font-size: 36rpx;
  font-weight: bold;
}

.record-list {
  padding: 0 30rpx;
  margin-top: -40rpx;
}

.record-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.record-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-status {
  font-size: 28rpx;
  font-weight: bold;
}

.status-pending {
  color: #ffa500;
}

.status-success {
  color: #07c160;
}

.status-rejected {
  color: #ff4d4f;
}

.record-amount {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.record-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
}

.record-detail {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1px solid #f0f0f0;
}

.record-detail-item {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}

.actual {
  color: #07c160;
}

.fee {
  color: #ff6b5d;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.loading, .load-more {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}

.loading-text, .load-more-text {
  font-size: 28rpx;
  color: #999;
}
</style> 